<!doctype html>



  


<html class="theme-next pisces use-motion">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PBHRK7');</script>
<!-- End Google Tag Manager -->
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="前端 知识 面试," />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.2" />






<meta name="description" content="最近做过的项目又遇到什么难点， 怎么解决？1.在使用node.js 开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存 与 释放库存， 可是到生产环境上（多进程）模式， 会出现数据不一致问题：定位分析问题，  生产环境与研发环境最大的不同点就是生产环境是多进程（cluster）模式，因此初步定位是 单线程下的node.js 与 多进程(cluster) 操作同一数据">
<meta name="keywords" content="前端 知识 面试">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试《第十九篇》 大厂的问题 (第一篇)">
<meta property="og:url" content="http://wurh.github.io/2019/04/06/201904060504/index.html">
<meta property="og:site_name" content="华Ing&#39;s blog">
<meta property="og:description" content="最近做过的项目又遇到什么难点， 怎么解决？1.在使用node.js 开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存 与 释放库存， 可是到生产环境上（多进程）模式， 会出现数据不一致问题：定位分析问题，  生产环境与研发环境最大的不同点就是生产环境是多进程（cluster）模式，因此初步定位是 单线程下的node.js 与 多进程(cluster) 操作同一数据">
<meta property="og:locale" content="en">
<meta property="og:image" content="https://wurh.github.io/images/blogs/201904060343/1.png">
<meta property="og:image" content="https://wurh.github.io/images/blogs/201904060343/2.png">
<meta property="og:image" content="https://wurh.github.io/images/blogs/201903311130/2.png">
<meta property="og:image" content="https://wurh.github.io/images/blogs/201903311130/3.png">
<meta property="og:updated_time" content="2019-07-12T06:10:38.193Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试《第十九篇》 大厂的问题 (第一篇)">
<meta name="twitter:description" content="最近做过的项目又遇到什么难点， 怎么解决？1.在使用node.js 开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存 与 释放库存， 可是到生产环境上（多进程）模式， 会出现数据不一致问题：定位分析问题，  生产环境与研发环境最大的不同点就是生产环境是多进程（cluster）模式，因此初步定位是 单线程下的node.js 与 多进程(cluster) 操作同一数据">
<meta name="twitter:image" content="https://wurh.github.io/images/blogs/201904060343/1.png">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Pisces',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: 'Author'
    }
  };
</script>




  <link rel="canonical" href="http://wurh.github.io/2019/04/06/201904060504/"/>


  <title> 前端面试《第十九篇》 大厂的问题 (第一篇) | 华Ing's blog </title>
</head>

<body itemscope itemtype="//schema.org/WebPage" lang="en">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBHRK7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

  










  
  
    
  

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-69412379-1', 'auto');
  ga('send', 'pageview');

</script>

  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b3ddfb8655d8b77429e04c7a4d5bcbc1";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
  </script>


  <div class="container one-collumn sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="//schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">华Ing's blog</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">harder and harder</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            Categories
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            Archives
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            Tags
          </a>
        </li>
      

      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="//schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                前端面试《第十九篇》 大厂的问题 (第一篇)
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">Posted on</span>
            <time itemprop="dateCreated" datetime="2019-04-06T05:05:16+08:00" content="2019-04-06">
              2019-04-06
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">In</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/前端面试/" itemprop="url" rel="index">
                    <span itemprop="name">前端面试</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/2019/04/06/201904060504/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="2019/04/06/201904060504/" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <h3 id="最近做过的项目又遇到什么难点，-怎么解决？"><a href="#最近做过的项目又遇到什么难点，-怎么解决？" class="headerlink" title="最近做过的项目又遇到什么难点， 怎么解决？"></a>最近做过的项目又遇到什么难点， 怎么解决？</h3><h4 id="1-在使用node-js-开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存-与-释放库存，-可是到生产环境上（多进程）模式，-会出现数据不一致问题："><a href="#1-在使用node-js-开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存-与-释放库存，-可是到生产环境上（多进程）模式，-会出现数据不一致问题：" class="headerlink" title="1.在使用node.js 开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存 与 释放库存， 可是到生产环境上（多进程）模式， 会出现数据不一致问题："></a>1.在使用node.js 开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存 与 释放库存， 可是到生产环境上（多进程）模式， 会出现数据不一致问题：</h4><p>定位分析问题，  生产环境与研发环境最大的不同点就是生产环境是多进程（cluster）模式，因此初步定位是 单线程下的node.js 与 多进程(cluster) 操作同一数据数据不一致问题</p>
<p>解决方案1： 通过数据库sql 语句乐观锁方式  如 </p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">update</span> shop <span class="keyword">set</span> stock=stock<span class="number">-1</span> <span class="keyword">where</span> <span class="keyword">id</span>=<span class="number">1</span> <span class="keyword">and</span> stock=stock;</span><br></pre></td></tr></table></figure>
<p>解决方案2： 通过数据库sql 语句悲观锁方式 如</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">select</span> <span class="keyword">id</span>,<span class="keyword">name</span>,stock <span class="keyword">as</span> old_stock <span class="keyword">from</span> shop  <span class="keyword">where</span> <span class="keyword">id</span>=<span class="number">1</span> <span class="keyword">for</span> <span class="keyword">update</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">update</span> shop <span class="keyword">set</span> stock=stock<span class="number">-1</span> <span class="keyword">where</span> <span class="keyword">id</span>=<span class="number">1</span> <span class="keyword">and</span> stock=old_stock;</span><br></pre></td></tr></table></figure>
<h4 id="2-在使用node-js-开发过程中，单机研发数据放在内存里面写入读取正常，当更新到生产环境多进程-cluster-模式下出现问题，-写入的数据丢失，或者无法获取"><a href="#2-在使用node-js-开发过程中，单机研发数据放在内存里面写入读取正常，当更新到生产环境多进程-cluster-模式下出现问题，-写入的数据丢失，或者无法获取" class="headerlink" title="2.在使用node.js 开发过程中，单机研发数据放在内存里面写入读取正常，当更新到生产环境多进程(cluster)模式下出现问题， 写入的数据丢失，或者无法获取"></a>2.在使用node.js 开发过程中，单机研发数据放在内存里面写入读取正常，当更新到生产环境多进程(cluster)模式下出现问题， 写入的数据丢失，或者无法获取</h4><p>定位分析问题： 因为node.js 是线程安全的，因此在cluster模式下，线程间的变量是在独立的空间，互相不能访问，因此在cluster 下不可获取变量数据</p>
<p>方案一：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//ipc 通信实现  master进程 接受消息 -&gt; 处理 -&gt; 发送回信</span></span><br><span class="line"><span class="comment">//				  worker进程建立 开始监听message事件</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// worker进程 发送消息</span></span><br><span class="line">process.send(‘读取共享内存<span class="string">');</span></span><br><span class="line"><span class="string">  </span></span><br><span class="line"><span class="string">// master进程 接收消息 -&gt; 处理 -&gt; 发送回信</span></span><br><span class="line"><span class="string">cluster.on('</span>online<span class="string">', function (worker) &#123;</span></span><br><span class="line"><span class="string">   // 有worker进程建立，即开始监听message事件</span></span><br><span class="line"><span class="string">   worker.on(‘message'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">data</span>) </span>&#123;</span><br><span class="line">     <span class="comment">// 处理来自worker的请求</span></span><br><span class="line">     <span class="comment">// 回传结果</span></span><br><span class="line">     worker.send(‘result<span class="string">')</span></span><br><span class="line"><span class="string">   &#125;);</span></span><br><span class="line"><span class="string">&#125;);</span></span><br></pre></td></tr></table></figure>
<p>方案二： 接入离线存储方案 redis or memorycache 等</p>
<h3 id="ReactJS-VUE-AngulrarJS，这三个流行的前端框架有何优劣，各自适用什么场景？"><a href="#ReactJS-VUE-AngulrarJS，这三个流行的前端框架有何优劣，各自适用什么场景？" class="headerlink" title="ReactJS/VUE/AngulrarJS，这三个流行的前端框架有何优劣，各自适用什么场景？"></a>ReactJS/VUE/AngulrarJS，这三个流行的前端框架有何优劣，各自适用什么场景？</h3><h4 id="AngulrarJS"><a href="#AngulrarJS" class="headerlink" title="AngulrarJS"></a>AngulrarJS</h4><blockquote>
<p>没怎么在项目中使用，主要了解功能强大，在复杂，大型项目中都会有用，但是目前感觉团队的学习成本还是会在这3个框架中较大</p>
</blockquote>
<ul>
<li><p>优点： 大厂google产品， 而且在google的支持下 会越来越成熟</p>
</li>
<li><p>弱点： 在实际开发过程中，每次大版本迭代变化差异性较大，同时维护成本较高</p>
</li>
</ul>
<h4 id="react"><a href="#react" class="headerlink" title="react"></a>react</h4><blockquote>
<p>react 是一个跨平台的js框架语言，对比angular 轻量，同时react的文档以及社区活跃目前来看都比angular要活跃， 基于react的生态圈框架也较多 UI ant-design, 数据流管理 redux, mobx， flux ， app方面 react-native，  跨端引用方面 taro （小程序，移动站，app）. 同时 react-native 在开发移动app时候 整体体验接近于原生，比 hybird app 体验更好</p>
</blockquote>
<ul>
<li><p>优点: React 和 Redux 的最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的，但这两个库都很有效地完成了它们的目标。虽然对于某些状态容器方法可能是外部的，但大多数开发人员还是可以轻松掌握概念，并了解单向数据体系结构的好处，简化大量的用户界面应用程序</p>
</li>
<li><p>缺点： React 和 Redux 最大的弱点不是它们是什么，而是它们不是什么。要构建一个功能丰富的 Web 应用程序，你需要许多功能，一旦脱离 React 和 Redux 和其他一些库的核心，你将发现一个非常分散的社区，拥有无数的解决方案和模式，不容易整合在一起。</p>
</li>
</ul>
<h4 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h4><blockquote>
<p>对比以上两大框架， vue.js 是最轻量的， 并且团队学习成本也是最低的， 通过社区也是相当的活跃，文档也是非常丰富， vue js 更注重ViewModel层， 让大家可以简单的看到数据到视图的绑定关系. vue.js 更适用于 开发效率快的前端应用.</p>
</blockquote>
<ul>
<li><p>优点： 渐进式构建能力是 vue.js 最大的优势，vue 有一个简洁而且合理的架构，使得它易于理解和构建。其次 vue的文档是最容易读懂的，成本最低</p>
</li>
<li><p>缺点： 一个更大的挑战是 vue.js 依赖于一个单独的人，很明显，其他的项目基本是由一个组织提供支持，但这让人感觉更加有意义，虽然它有一个强大文件的社区和许多有创新的新增项目，但是 vue 核心的开发基本落在一个人身上。</p>
</li>
</ul>
<h3 id="对CSS3的flex布局有何了解？一段文字分三列自适应显示，如何实现？"><a href="#对CSS3的flex布局有何了解？一段文字分三列自适应显示，如何实现？" class="headerlink" title="对CSS3的flex布局有何了解？一段文字分三列自适应显示，如何实现？"></a>对CSS3的flex布局有何了解？一段文字分三列自适应显示，如何实现？</h3><blockquote>
<p>Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小；然后当Flex容器被应用一个大小时（width和height），将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向（横向和纵向）和是否支持元素的自动换行。有了这个神器，做页面布局的可以方便很多了。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.parant</span>&#123;</span><br><span class="line">	<span class="attribute">width</span>:<span class="number">100%</span></span><br><span class="line">	height:<span class="number">200px</span>;</span><br><span class="line">	 <span class="attribute">display</span>: box;</span><br><span class="line">    <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.child1</span>&#123;</span><br><span class="line"> 	<span class="attribute">-webkit-box-flex</span>:<span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="web性能优化有哪些点？-vue-js如何性能优化？-ReactJS如何优化性能？"><a href="#web性能优化有哪些点？-vue-js如何性能优化？-ReactJS如何优化性能？" class="headerlink" title="web性能优化有哪些点？ vue.js如何性能优化？ ReactJS如何优化性能？"></a>web性能优化有哪些点？ vue.js如何性能优化？ ReactJS如何优化性能？</h3><hr>
<blockquote>
<p>web 性能优化可以从好几个维度来开始谈</p>
</blockquote>
<ul>
<li>网络层面: 对展现类请求实现接口缓存方案(请求协议 -&gt; cache control 如果有maxage 则 maxage 否则 expire时间,  http1.1 协议规定了 etag &gt; lastmodify)</li>
</ul>
<p>浏览器请求 -&gt; 是否有缓存 -&gt; 是否有etag -&gt; 是否有lastmodify -&gt; 访问Web服务</p>
<ul>
<li><p>静态资源方面：对于静态资源采用cdn缓存方案</p>
</li>
<li><p>前端静态化/前端首页首屏静态化/后端渲染静态化方案</p>
</li>
<li><p>gzip 压缩相关静态资源</p>
</li>
<li><p>样式表指定</p>
</li>
<li><p>减少 页面dom 元素</p>
</li>
<li><p>优化图片 (sprit图 图片大小压缩  webp)</p>
</li>
<li><p>提前预加载内容 ， 网页内容缓存方案</p>
</li>
<li><p>通过service-worker fetch 缓存静态资源到浏览器</p>
</li>
<li><p>避免页面的重定向（跳转）</p>
</li>
<li><p>主文档控制gzip 后大小， 最好不超过16k (减少浏览器的RTT 请求次数)</p>
</li>
</ul>
<hr>
<blockquote>
<p>vue.js 如何进行性能优化</p>
</blockquote>
<ul>
<li><p>webpack上的 productionSourceMap 修改为false(屏蔽soruceMap)</p>
</li>
<li><p>压缩js css 图片（webpack） 前端工程化</p>
</li>
<li><p>对路由组件进行 懒加载 (component: resolve =&gt; require([‘@/components/demo’]))</p>
</li>
<li><p>v-show 与 v-if 选择性使用， v-show 是不管true 和 false 都会进行渲染， 并且会占用布局空间， v-if 是懒加载，为true时才会加载。 因此如果频繁操作 展示隐藏 优先使用v-show</p>
</li>
<li><p>for 循环为 item 设置唯一key,  方面vue内部基础精准找到列表数据，state 更新时 较快地定位到 dom diff</p>
</li>
<li><p>做好组件的封装</p>
</li>
<li><p>减少 watch 的数据量， 对于较大的数据建议使用vuex</p>
</li>
<li><p>图片懒加载方案</p>
</li>
<li><p>服务端渲染SSR 方案</p>
</li>
</ul>
<blockquote>
<p> 用户体验优化</p>
</blockquote>
<ul>
<li><p>菊花loading</p>
</li>
<li><p>骨架屏加载 （首页首屏静态化）</p>
</li>
</ul>
<hr>
<blockquote>
<p>react.js 如何进行性能优化</p>
</blockquote>
<ul>
<li><p>react组件的性能优化（渲染角度优化）  可以使用react perf 来进行查看<br>  有chrome 插件 或者在react 16版本中 url带上react_pref 查看 chrome 的<br>  performance</p>
</li>
<li><p>render里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量。</p>
</li>
</ul>
<ul>
<li><p>定制shouldComponentUpdate函数,shouldComponentUpdate是决定react组件什么时候能够不重新渲染的函数，但是这个函数默认的实现方式就是简单的返回一个true。也就是说，默认每次更新的时候都要调用所用的生命周期函数，包括render函数，重新渲染。</p>
</li>
<li><p>多个react组件性能优化，key的优化</p>
</li>
</ul>
<h3 id="http协议常用状态码有些？http协议缓存机制是怎样的？"><a href="#http协议常用状态码有些？http协议缓存机制是怎样的？" class="headerlink" title="http协议常用状态码有些？http协议缓存机制是怎样的？"></a>http协议常用状态码有些？http协议缓存机制是怎样的？</h3><h4 id="http常用状态码"><a href="#http常用状态码" class="headerlink" title="http常用状态码"></a>http常用状态码</h4><ul>
<li>信息性状态码：100~199</li>
<li>成功状态码：200~299</li>
<li>重定向状态码：300~399</li>
<li>客户端错误状态码：400~499</li>
<li>服务端错误状态码：500~599</li>
</ul>
<pre><code>- 200 OK 客户端请求成功   
- 301 Moved Permanently 请求永久重定向    
- 302 Moved Temporarily 请求临时重定向    
- 304 Not Modified 文件未修改，可以直接使用缓存的文件。  
- 400 Bad Request 由于客户端请求有语法错误，不能被服务器所理解。  
- 401 Unauthorized 请求未经授权。这个状态代码必须和WWW-Authenticate报头域一起使用 
- 403 Forbidden 服务器收到请求，但是拒绝提供服务。服务器通常会在响应正文中给出不提供服务的原因    
- 404 Not Found 请求的资源不存在，例如，输入了错误的URL  
- 500 Internal Server Error 服务器发生不可预期的错误，导致无法完成客户端的请求。 
- 503 Service Unavailable 服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常。
</code></pre><h4 id="http协议缓存机制"><a href="#http协议缓存机制" class="headerlink" title="http协议缓存机制"></a>http协议缓存机制</h4><p>浏览器请求 -&gt; 是否有缓存 -&gt; 是否有etag -&gt; 是否有lastmodify -&gt; 访问Web服务</p>
<h3 id="http2-0协议做了哪些改进"><a href="#http2-0协议做了哪些改进" class="headerlink" title="http2.0协议做了哪些改进"></a>http2.0协议做了哪些改进</h3><ul>
<li><p>http2.0 只用于https </p>
</li>
<li><p>http2.0 是多路复用 (Multiplexing)  </p>
<blockquote>
<p>在 HTTP/1.1 协议中 「浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。<br>HTTP/2 的多路复用(Multiplexing) 则允许同时通过单一的 HTTP/2 连接发起多重的请求-响应;因此 HTTP/2 可以很容易的去实现多流并行而不用依赖建立多个 TCP 连接，HTTP/2 把 HTTP 协议通信的基本单位缩小为一个一个的帧，这些帧对应着逻辑流中的消息。并行地在同一个 TCP 连接上;往往有效的解决了统一域名请求限制阻塞问题。</p>
</blockquote>
</li>
<li><p>二进制分帧 </p>
<blockquote>
<p>在二进制分帧层中， HTTP/2 会将所有传输的信息分割为更小的消息和帧（frame）,并对它们采用二进制格式的编码 ，其中 HTTP1.x 的首部信息会被封装到 HEADER frame，而相应的 Request Body 则封装到 DATA frame 里面</p>
</blockquote>
</li>
</ul>
<ul>
<li><p>首部压缩（Header Compression）</p>
<blockquote>
<p>HTTP/1.1并不支持 HTTP 首部压缩，为此 SPDY 和 HTTP/2 应运而生， SPDY 使用的是通用的DEFLATE 算法，而 HTTP/2 则使用了专门为首部压缩而设计的 HPACK 算法</p>
</blockquote>
</li>
<li><p>服务端推送</p>
<blockquote>
<p>HTTP1.x 时代使用内嵌资源的优化手段变得没有意义；如果一个请求是由你的主页发起的，服务器很可能会响应主页内容、logo 以及样式表，因为它知道客户端会用到这些东西。这相当于在一个 HTML 文档内集合了所有的资源，不过与之相比，服务器推送还有一个很大的优势：可以缓存！也让在遵循同源的情况下，不同页面之间可以共享缓存资源成为可能</p>
</blockquote>
</li>
</ul>
<h3 id="前端项目构建、部署用到哪些工具？除了文件压缩、打包、hash，还有哪些可优化的点？"><a href="#前端项目构建、部署用到哪些工具？除了文件压缩、打包、hash，还有哪些可优化的点？" class="headerlink" title="前端项目构建、部署用到哪些工具？除了文件压缩、打包、hash，还有哪些可优化的点？"></a>前端项目构建、部署用到哪些工具？除了文件压缩、打包、hash，还有哪些可优化的点？</h3><h4 id="前端项目构建、部署用到的工具"><a href="#前端项目构建、部署用到的工具" class="headerlink" title="前端项目构建、部署用到的工具"></a>前端项目构建、部署用到的工具</h4><ul>
<li><p>webpack （前端工程化主流工具  通过模块化进行构建，支持静态资源压缩，文件合并，预编译编译等功能， 主要为是通过配置 单个entry.js 进行工程配置，可以配置多个环境 dev test prod； 还可以通过loader 增加需要用到的模块， 通过plugin 以及自定编写 plugin loader 实现自己的编译过程）</p>
</li>
<li><p>gulp 基于任务流的构建工具，可以对文件进行压缩 合并等操作</p>
</li>
<li><p>jenkins 自动化构建部署工具，编写构建过程脚本，通过webhook监听 gitlab开发分支变化，实现自动化部署更新(开发，测试，生产)环境</p>
</li>
</ul>
<h4 id="前端工程化优化点"><a href="#前端工程化优化点" class="headerlink" title="前端工程化优化点"></a>前端工程化优化点</h4><ul>
<li><p>网络方向的优化</p>
</li>
<li><p>浏览器部分的优化</p>
</li>
<li><p>用户体验部分的优化</p>
</li>
</ul>
<h3 id="从输入URL到页面加载完成的过程中都发生了什么事情？（这个问题涉及面非常广，谈的越多越好）"><a href="#从输入URL到页面加载完成的过程中都发生了什么事情？（这个问题涉及面非常广，谈的越多越好）" class="headerlink" title="从输入URL到页面加载完成的过程中都发生了什么事情？（这个问题涉及面非常广，谈的越多越好）"></a>从输入URL到页面加载完成的过程中都发生了什么事情？（这个问题涉及面非常广，谈的越多越好）</h3><h4 id="域名解析阶段"><a href="#域名解析阶段" class="headerlink" title="域名解析阶段"></a>域名解析阶段</h4><ul>
<li><p>解析域名 (DNS) 解析 (本地缓存查找dns 解析记录); 如果有则返回ip地址， 否则浏览器检查当前操作系统hosts文件，是否有该域名的dns解析记录，如果有则返回</p>
</li>
<li><p>如果都找不到，则会像域名服务器发起请求来解析这个域名</p>
</li>
<li><p>请求会先到LDNS （本地域名服务器） 让他尝试解析， 如果也没有 则到根域名服务器请求来解析这个域名</p>
</li>
<li><p>此时 LDNS 会向gTLD服务器发起解析请求（对应Name Server 域名服务器的地址）</p>
</li>
<li><p>请求到达传输层，tcp 协议为传输报文提供可靠的字节流传输服务， 通过三次握手手段保证书传输过程中的数据安全可靠. 把大快数据分割成一个个报文段的方式</p>
</li>
<li><p>到网络层， 通过ARP寻址得到对方的mac地址， ip协议把数据传送</p>
</li>
<li><p>数据到达数据链路层，请求阶段完成</p>
</li>
<li><p>获取到请求数据包后，进行寻找资源（html 主文档） 并响应报文</p>
</li>
<li><p>拿回主文档html后进行页面渲染流程</p>
</li>
</ul>
<h4 id="页面渲染阶段"><a href="#页面渲染阶段" class="headerlink" title="页面渲染阶段"></a>页面渲染阶段</h4><ul>
<li><p>html -》 html parser 解析dom 树 从上到下</p>
</li>
<li><p>解析 javascript （有可能存在js 阻塞）</p>
</li>
<li><p>解析 css - cssom api 解析 css树</p>
</li>
<li><p>渲染树 render tree (重绘， 重排/回流)问题</p>
</li>
<li><p>渲染页面</p>
</li>
</ul>
<blockquote>
<p>reflow 重排/回流  浏览器渲染重的一种行为， 当render tree 任一节点几何尺寸发生变化，会进行重新布局 。 常见 文档流与浮动 遇到高度坍塌导致 回流，  或者是javascript 操作dom树导致的 reflow</p>
</blockquote>
<blockquote>
<p>repain 重绘 渲染中的一种行为， render tree 任一元素样式属性发生变化， 几何尺寸未变化，render tree 都会重新画， 如字体颜色，背景等</p>
</blockquote>
<h4 id="前端性能方面"><a href="#前端性能方面" class="headerlink" title="前端性能方面"></a>前端性能方面</h4><h5 id="html-解析"><a href="#html-解析" class="headerlink" title="html 解析"></a>html 解析</h5><ul>
<li><p>html 元素是以深度优先的方式进行解析</p>
</li>
<li><p>script , link , style 等标签都会使解析过程产生阻塞，阻塞情况如下：</p>
<ol>
<li>外部样式会阻塞内部脚本的执行</li>
<li>外部样式与外部脚本并行加载，但外部样式会阻塞外部脚本执行</li>
<li>如果外部脚本带有async属性，则外部脚本的加载不受影响</li>
<li>如果link标签是动态创建(js 生成) 不管有无async属性，都不会阻塞外部脚本的加载与执行</li>
</ol>
</li>
</ul>
<ul>
<li><p>css解析 从右到左解析</p>
</li>
<li><p>脚本执行(js 解析)</p>
</li>
</ul>
<h3 id="你是如何了解业界最新技术和发展趋势的"><a href="#你是如何了解业界最新技术和发展趋势的" class="headerlink" title="你是如何了解业界最新技术和发展趋势的"></a>你是如何了解业界最新技术和发展趋势的</h3><ul>
<li>实践与对做过的项目进行知识总结，汇总 收集.</li>
<li>平常多关注前端技术方向(js社区，掘金，github，微信公众号,微博 等)</li>
<li>在GitHub中 查阅前沿的技术栈代码，进行实践</li>
<li>可以通过研发内部提升效率工具 实践新学习的技术.</li>
</ul>
<h3 id="谈谈你最近了解的最新技术有哪些？"><a href="#谈谈你最近了解的最新技术有哪些？" class="headerlink" title="谈谈你最近了解的最新技术有哪些？"></a>谈谈你最近了解的最新技术有哪些？</h3><ul>
<li><p>GraphQL 基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。</p>
</li>
<li><p>pwa Progressive Web App , 即渐进式WEB应用。 主要通过app mainfest 和 service worker 来实现 pwa的安装和离线等功能</p>
<ol>
<li>mainfest.json 配置应用url icon图标 </li>
<li>service worker实现离线缓存<ul>
<li>优点：<ul>
<li>service worker 就像介于服务器与网页之间的拦截器，拦截进出的http请求，从而完全控制你的网站</li>
<li>service worker 能实现本地缓存</li>
<li>service worker 能实现webpush</li>
</ul>
</li>
<li>缺点：<ul>
<li>支持率不高:现在ios手机端不支持pwa，IE也暂时不支持</li>
<li>Chrome在中国桌面版占有率还是不错的，安卓移动端上的占有率却很低</li>
<li>依赖的GCM服务在国内无法使用</li>
</ul>
</li>
</ul>
</li>
</ol>
</li>
<li><p>typescript  </p>
<ol>
<li>javascript 的超集开发语言（任何的javscript语句在typescript下）都是合法的</li>
<li>语法糖 提供了类 模块 接口，易于构建组件</li>
<li>支持类型检查，面向对象的特性</li>
</ol>
</li>
</ul>
<h3 id="是否了解react的下一代架构Fiber？你对PWA-渐进式Web-APP-有何看法？"><a href="#是否了解react的下一代架构Fiber？你对PWA-渐进式Web-APP-有何看法？" class="headerlink" title="是否了解react的下一代架构Fiber？你对PWA(渐进式Web APP)有何看法？"></a>是否了解react的下一代架构Fiber？你对PWA(渐进式Web APP)有何看法？</h3><h4 id="我理解的Fiber架构："><a href="#我理解的Fiber架构：" class="headerlink" title="我理解的Fiber架构："></a>我理解的Fiber架构：</h4><blockquote>
<p>改变了之前react的组件渲染机制，新的架构使原来同步渲染的组件现在可以异步化，可中途中断渲染，执行更高优先级的任务。释放浏览器主线程，</p>
</blockquote>
<h4 id="要理解Fiber架构，首先要理解react16以前，组建的渲染顺序"><a href="#要理解Fiber架构，首先要理解react16以前，组建的渲染顺序" class="headerlink" title="要理解Fiber架构，首先要理解react16以前，组建的渲染顺序."></a>要理解Fiber架构，首先要理解react16以前，组建的渲染顺序.</h4><p>在我之前的一篇文章有简单介绍，阅读react源码–记录：1.1 问题记录<br>下面从一个具体实例理解一下，再加上我画了图，应该很好理解啦~（图画的有点渣）</p>
<p>假如有A,B,C,D组件，层级结构为：</p>
<pre><code>顶层       子组件      子组件
 A  ----       B    ----  C

                   ----  D
</code></pre><p>我们知道组件的生命周期为：<br>挂载阶段：</p>
<ul>
<li>constructor()</li>
<li>componentWillMount()</li>
<li>render()</li>
<li>componentDidMount()</li>
</ul>
<p>更新阶段为：</p>
<ul>
<li>componentWillReceiveProps()</li>
<li>shouldComponentUpdate()</li>
<li>componentWillUpdate()</li>
<li>render()</li>
<li>componentDidUpdate</li>
</ul>
<p>那么在挂载阶段，A,B,C,D的生命周期渲染顺序是如何的呢？</p>
<p><img src="https://wurh.github.io/images/blogs/201904060343/1.png" alt=""></p>
<p>以render()函数为分界线。从顶层组件开始，一直往下，直至最底层子组件。然后再往上。</p>
<p>组件update阶段同理。</p>
<hr>
<p>前面是react16以前的组建渲染方式。这就存在一个问题，</p>
<h4 id="如果这是一个很大，层级很深的组件，react渲染它需要几十甚至几百毫秒，在这期间，react会一直占用浏览器主线程，任何其他的操作（包括用户的点击，鼠标移动等操作）都无法执行。"><a href="#如果这是一个很大，层级很深的组件，react渲染它需要几十甚至几百毫秒，在这期间，react会一直占用浏览器主线程，任何其他的操作（包括用户的点击，鼠标移动等操作）都无法执行。" class="headerlink" title="如果这是一个很大，层级很深的组件，react渲染它需要几十甚至几百毫秒，在这期间，react会一直占用浏览器主线程，任何其他的操作（包括用户的点击，鼠标移动等操作）都无法执行。"></a>如果这是一个很大，层级很深的组件，react渲染它需要几十甚至几百毫秒，在这期间，react会一直占用浏览器主线程，任何其他的操作（包括用户的点击，鼠标移动等操作）都无法执行。</h4><p>好似一个潜水员，当它一头扎进水里，就要往最底层一直游，直到找到最底层的组件，然后他再上岸。在这期间，<code>岸上发生的任何事，都不能对他进行干扰，如果有更重要的事情需要他去做（如用户操作），也必须得等他上岸</code></p>
<p>Fiber架构就是为了解决这个问题。</p>
<p>看一下fiber架构 组建的渲染顺序</p>
<p>潜水员会每隔一段时间就上岸，看是否有更重要的事情要做。</p>
<p>加入fiber的react将组件更新分为两个时期</p>
<p>phase 1</p>
<p>phase 2</p>
<p>这两个时期以render为分界，</p>
<blockquote>
<p>render前的生命周期为phase1,</p>
</blockquote>
<blockquote>
<p>render后的生命周期为phase2</p>
</blockquote>
<p>phase1的生命周期是可以被打断的，每隔一段时间它会跳出当前渲染进程，去确定是否有其他更重要的任务。此过程，React 在 workingProgressTree （并不是真实的virtualDomTree）上复用 current 上的 Fiber 数据结构来一步地（通过requestIdleCallback）来构建新的 tree，标记处需要更新的节点，放入队列中。</p>
<p>phase2的生命周期是不可被打断的，React 将其所有的变更一次性更新到DOM上。</p>
<p>如果组件再phase1过程中被打断，即当前组件只渲染到一半（也许是在willMount,也许是willUpdate~反正是在render之前的生命周期），那么react会怎么干呢？ react会放弃当前组件所有干到一半的事情，去做更高优先级更重要的任务（当然，也可能是用户鼠标移动，或者其他react监听之外的任务），当所有高优先级任务执行完之后，react通过callback回到之前渲染到一半的组件，从头开始渲染。（看起来放弃已经渲染完的生命周期，会有点不合理，反而会增加渲染时长，但是react确实是这么干的）</p>
<p>看到这里，相信聪明的同学已经发现一些问题啦~</p>
<blockquote>
<p>也就是 所有phase1的生命周期函数都可能被执行多次，因为可能会被打断重来</p>
</blockquote>
<p>所以react16目前都没有把fiber enable</p>
<p>所以，facebook在react16增加fiber结构，其实并不是为了减少组件的渲染时间，事实上也并不会减少，最重要的是现在可以使得一些更高优先级的任务，如用户的操作能够优先执行，提高用户的体验，至少用户不会感觉到卡顿~</p>
<h3 id="如何在团队中推广你做的东西？（职位相关问题）"><a href="#如何在团队中推广你做的东西？（职位相关问题）" class="headerlink" title="如何在团队中推广你做的东西？（职位相关问题）"></a>如何在团队中推广你做的东西？（职位相关问题）</h3><ul>
<li><p>首先搜集团队中遇到的问题，进行分类，并且探讨解决方案</p>
</li>
<li><p>对于自己开发的工具与项目，看看着重可以解决团队的什么问题，并且是否可以提高整体质量与效率，是否有应用的场景</p>
</li>
<li><p>编写demo以及易于阅读的文档，优先从自己的项目内进行使用，在使用过程中搜集问题处理问题</p>
</li>
<li><p>当自己团队已经使并且迭代几个版本都没什么问题，可以尝试在部门内推广，以及搜神记问题.</p>
</li>
</ul>
<h3 id="你的职业规划是怎样的"><a href="#你的职业规划是怎样的" class="headerlink" title="你的职业规划是怎样的"></a>你的职业规划是怎样的</h3><ul>
<li>保持对业界前端技术的关注，以及编码</li>
<li>在业务团队内做问题的终结者，并且总结出多套适用于不同业务的业务领域解决方案</li>
<li>与业务团队共同成长，对于自己负责的业务领域争取往更深的技术问题以及业务问题研究</li>
<li>深度方面继续往前端以及全栈（以node.js为主  java springboot 为辅）进行扎根.</li>
</ul>
<h3 id="什么是继承"><a href="#什么是继承" class="headerlink" title="什么是继承"></a>什么是继承</h3><p>子类能继承父类的属性与方法</p>
<ul>
<li>构造函数+原型链继承+深拷贝</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name,age</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">this</span>.name = name;</span><br><span class="line">	<span class="keyword">this</span>.age = agel</span><br><span class="line">	<span class="keyword">this</span>.showName = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="built_in">console</span>.log(<span class="keyword">this</span>.name)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Person.prototype.friends = [<span class="string">'11'</span>,<span class="string">'22'</span>];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	Person.call(<span class="keyword">this</span>)；</span><br><span class="line">	<span class="keyword">this</span>.type = <span class="string">"child"</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Person.prototype);</span><br><span class="line">Child.prototype.constructor = Child;</span><br></pre></td></tr></table></figure>
<ul>
<li>ES6 继承方式</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>&#123;</span><br><span class="line">	<span class="keyword">constructor</span>(name,age)&#123;</span><br><span class="line">		<span class="keyword">this</span>.name = name;</span><br><span class="line">		<span class="keyword">this</span>.age = age;</span><br><span class="line">		<span class="keyword">this</span>.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">console</span>.log(<span class="string">'say Hi'</span>);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Child</span> <span class="keyword">extends</span> <span class="title">Person</span></span>&#123;</span><br><span class="line">	<span class="keyword">constructor</span>(name,age,sex)&#123;</span><br><span class="line">		<span class="keyword">super</span>(name,age);</span><br><span class="line">		<span class="keyword">this</span>.sex = sex;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="如果设计一个JS组件，会如何设计？"><a href="#如果设计一个JS组件，会如何设计？" class="headerlink" title="如果设计一个JS组件，会如何设计？"></a>如果设计一个JS组件，会如何设计？</h3><ul>
<li>单一职责原则(SRP)  一个方法只做一件事情（函数的功能单一）</li>
<li>里氏替换原则(LSP) 子类可以代替父类</li>
<li>依赖倒置原则(DIP) 只依赖接口不依赖方法，不关心底层的实现方法</li>
<li>接口分类原则(ISP) 把大的接口分拆成小的接口（功能单一）</li>
<li>迪米特法则 最少知道原则  函数中传入的参数越少越好</li>
<li>开闭原则 面向扩展开放，面向修改关闭，可扩展</li>
</ul>
<h3 id="PC、移动端的做法，有什么不同"><a href="#PC、移动端的做法，有什么不同" class="headerlink" title="PC、移动端的做法，有什么不同"></a>PC、移动端的做法，有什么不同</h3><ul>
<li>PC端事件多以点击事件位置，click  移动端有touch事件</li>
<li>PC端交互以鼠标为主， 移动端以手势，触屏为主</li>
<li>PC端网络情况多以wifi为主，网络稳定性相对于由于移动端</li>
<li>PC端主要考虑IE浏览器， Firefox浏览器 等兼容问题，移动端大部分以webkit核为主，主要考虑手机系统兼容，屏幕兼容问题</li>
</ul>
<h3 id="Node-js-是否有用？-Node-js-是什么"><a href="#Node-js-是否有用？-Node-js-是什么" class="headerlink" title="Node.js 是否有用？ Node.js 是什么"></a>Node.js 是否有用？ Node.js 是什么</h3><h4 id="Node-js-是什么"><a href="#Node-js-是什么" class="headerlink" title="Node.js 是什么"></a>Node.js 是什么</h4><p>node.js 是一个让javascript 运行在服务端的开发平台， 是一个基于 Chrome V8 引擎的 JavaScript 运行环境</p>
<p>node.js 优点： 快，性能高， 开发效率高， 应用范围广</p>
<h5 id="Node-js有超强的高并发能力"><a href="#Node-js有超强的高并发能力" class="headerlink" title="Node.js有超强的高并发能力"></a>Node.js有超强的高并发能力</h5><p>Node.js的首发目标，是提供一种简单的，用语创建高性能服务器及在该服务器中运行各种应用程序的开发工具。</p>
<p>Node.js不为每个客户连接创建一个新的线程，而仅仅使用一个线程。</p>
<p>这就是Node基于单线程（只有一个主线程去接请求，给响应）</p>
<p>Node.js当接收到一个用户连接，就会触发一个内部事件。通过事先定义好的函数，达到响应用户的行为。Node.js主线程并不关心程序要走什么流程，实际上，有另外的工作线程去帮Node主线程去存取文件，读数据库，当工作线程读取到文件数据，或数据库里面的数据，就会把回调函数返回给Node主线程去执行，例如 把找到的数据传回客户端，关闭连接一些操作。（这就是Node非阻塞I/O，基于事件驱动）。</p>
<p><img src="https://wurh.github.io/images/blogs/201904060343/2.png" alt=""></p>
<p>这时候我们脑袋里面应该有个雏形，就是——Node.js主线程一直在接收请求和响应请求这个活里面倒腾，这样它就可以不停地接收多个客户端发过来的请求，它不用傻傻去等待IO操作，IO工作线程找到了数据，就会触发事件回调函数告诉主线程数据已经拿到了，这时候主线就执行回调函数，把数据返回给客户端。</p>
<h5 id="Node用的就是JavaScript的语法"><a href="#Node用的就是JavaScript的语法" class="headerlink" title="Node用的就是JavaScript的语法"></a>Node用的就是JavaScript的语法</h5><p>  Node.JS 基于 javaScript 的 V8引擎，也就是说只要会JS的语法，就能用于后端开发，但是Node官方推荐用ECMA Script6（ES6）语法 。</p>
<p>  Node打破了过去JavaScript只能在浏览器运行的局面，让前后端编程环境统一，这样就大大降低了开发成本。(这一点对前端开发人员非常友好，JS能做的东西越来越多，前端发展就越来越快)</p>
<h5 id="Node-JS-出现促成前端工程化思想"><a href="#Node-JS-出现促成前端工程化思想" class="headerlink" title="Node.JS 出现促成前端工程化思想"></a>Node.JS 出现促成前端工程化思想</h5><p>前端最近几年发展迅速，Node.js起到不可替代的作用。</p>
<pre><code>Node.js不仅仅是运行环境，也是一门脱胎换骨全新的JavaScript语言，它容纳了JS语法基础，还加入一些内部模块

如：

       http用来处理请求响应的模块

       fs   用来读取文件的模块

       url   用来解析请求数据等等 
</code></pre><p>Node.js 在某种层面上影响着前端开发的模式。让前端工程模块化，开发迅速，降低代码耦合度，可维护性大大增强。</p>
<h5 id="Node-js适合做什么？"><a href="#Node-js适合做什么？" class="headerlink" title="Node.js适合做什么？"></a>Node.js适合做什么？</h5><ul>
<li>前后端编程语言环境统一</li>
<li>Node带来的高性能I/O用于实时应用</li>
<li>并行I/O使得使用者可以更高效地利用分布式环境</li>
<li>并行I/O有效利用稳定接口提升web渲染能力</li>
<li>云平台提供node.js支持</li>
<li>工具类应用</li>
</ul>
<h5 id="Node-js适合做什么？-1"><a href="#Node-js适合做什么？-1" class="headerlink" title="Node.js适合做什么？"></a>Node.js适合做什么？</h5><ul>
<li><p>CPU计算密集型程序</p>
</li>
<li><p>逻辑复杂的事务性服务</p>
</li>
</ul>
<h4 id="Node-js-的事件循环"><a href="#Node-js-的事件循环" class="headerlink" title="Node.js 的事件循环"></a>Node.js 的事件循环</h4><p>Node 采用单线程的处理机制（所有IO请求都采用非阻塞的工作方式），而在底层。Node借助libuv作为抽象封装层，从而屏蔽不同操作系统的差异，Node借助libuv来实现多线程。</p>
<p><img src="https://wurh.github.io/images/blogs/201903311130/2.png" alt=""></p>
<p>Libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个事件循环， 以异步的方式将任务的执行结果返回给V8引擎。可以简单用下面这张图来表示。</p>
<p><img src="https://wurh.github.io/images/blogs/201903311130/3.png" alt=""></p>
<p>每一个I/O都需要一个回调函数——一旦执行完便推到事件循环上用于执行。</p>
<h4 id="认识v8-引擎"><a href="#认识v8-引擎" class="headerlink" title="认识v8 引擎"></a>认识v8 引擎</h4><p>V8是被设计用来提高网页浏览器内部JavaScript执行的性能，那么如何提高性能呢？</p>
<p>V8特性如下:</p>
<ul>
<li>JIT 即时编译 解释器直接产生可执行数据，不产生中间码.</li>
<li>垃圾回收 精确回收, 相比保守的回收, 涉及减少碎片, 内存复用, 要经常移动内存块, 所以操作要复杂得多.</li>
</ul>
<p>自动侦测需要释放的内存, 因为侦测有消耗, 所以分为新生代和老年代, 来区分不同的侦测频率.</p>
<ul>
<li>内嵌缓存: 缓存查找属性的结果, 减少一次属性查找</li>
</ul>
<p>对于短的函数直接以函数内的实现替换调用, 减少一次函数调用</p>
<ul>
<li>隐藏类： 让相似的JS对象以native的数据结构的形态存在于内存之中.</li>
</ul>
<p>从而加速对象的存取操作, 不过一旦数据需要出现结构性改变,</p>
<p>此时又会将数据转换成另一个隐藏类, 除非隐藏类无法支持下去</p>
<h3 id="项目有没做单元测试？"><a href="#项目有没做单元测试？" class="headerlink" title="项目有没做单元测试？"></a>项目有没做单元测试？</h3><p>在代码提交之前都会进行单元测试</p>
<h4 id="使用mocha-进行单元测试，-通过Assert断言库进行"><a href="#使用mocha-进行单元测试，-通过Assert断言库进行" class="headerlink" title="使用mocha 进行单元测试， 通过Assert断言库进行"></a>使用mocha 进行单元测试， 通过Assert断言库进行</h4><p>在thinkjs2.x 已经内置mocha， 只需要 执行 npm run test 则可以执行</p>
<hr>
<p>在 egg.js 可以通过 egg-mock + macha 进行单元测试,  单元测试目前对于核心的 controller , service 层都会进行</p>
<p>单元测试伪代码:</p>
<p>describe(‘good test’,()=&gt;{<br>    before(()=&gt; dosomthing());<br>    it(‘should redirect’,()=&gt;{<br>            return app.httpRequest()<br>            .get(‘/‘)<br>            .expect(302);<br>    })<br>})</p>
<h3 id="在项目中，你的角色是怎样的？获得了怎样的成绩"><a href="#在项目中，你的角色是怎样的？获得了怎样的成绩" class="headerlink" title="在项目中，你的角色是怎样的？获得了怎样的成绩"></a>在项目中，你的角色是怎样的？获得了怎样的成绩</h3><p>在项目中我主要担任项目技术负责人，以及技术选型的角色</p>
<p>在项目管理中，指定项目迭代规范，从需求分解 -》 技术设计 -》 任务拆分 -》研发编码 -》 单元测试/自测 -》 提测 -》 测试环境测试 -》 封板发布 -》 线上验收 -》版本回顾 </p>
<p>在项目管理中主要通过vsts 进行项目管理</p>
<p>使用编写jenkins 脚本 完成开发环境， 测试环境的 自动化构建与部署</p>
<p>在前端开发与后端开发中 通过YAPI/RAP2 进行mock数据管理, java（swagger）进行数据mock， 完成前后端并行开发.</p>
<hr>
<p>获得的成绩：</p>
<ul>
<li>从项目立项到版本上线 不到1个月 完成线上产品0 - 1 阶段， 并且产生线上订单.</li>
<li>在不到10人的研发资源里面，完成多个系统的开发，部署，已经环境维护等工作.</li>
</ul>
<h3 id="websocket-协议"><a href="#websocket-协议" class="headerlink" title="websocket 协议"></a>websocket 协议</h3><p>websocket 相对于 http协议来说是一个持久化的协议</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">GET /chat HTTP/<span class="number">1.1</span>Host: server.example.comUpgrade: </span><br><span class="line"></span><br><span class="line">websocketConnection: Upgrade</span><br><span class="line"></span><br><span class="line">Sec-WebSocket-Key:x3JJHMbDL1EzLkh9GBhXDw==</span><br><span class="line"></span><br><span class="line">Sec-WebSocket-Protocol: chat, </span><br><span class="line"> </span><br><span class="line">superchatSec-WebSocket-Version: <span class="number">13</span></span><br><span class="line"></span><br><span class="line">Origin: http:<span class="comment">//example.com</span></span><br></pre></td></tr></table></figure>
<p>websocket借用了HTTP的握手，是HTTP的一个解决特定问题的补丁</p>
<p>Upgrade: websocket</p>
<p>Connection: Upgrade</p>
<p>这就是websocket的核心，告诉服务器这是websocket请求，而不是http请求</p>
<p>Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==</p>
<p>Sec-WebSocket-Protocol: chat, superchat</p>
<p>Sec-WebSocket-Version: 13</p>
<p>Sec-WebSocket-Key是一个Base64 encod的值，是一个随机生成的，用于验证是否是真正的websocket</p>
<p>然后Sec-WebSocket-Protocol是一个用户定义的字符串，用来区分同URL下，不同的服务需要不同的协议</p>
<p>Sec-WebSocket-Version这个不用说就是websocket的版本号。 那么服务端就会返回下列东西</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="string">'WebSocket'</span> <span class="keyword">in</span> <span class="built_in">window</span>) &#123;</span><br><span class="line">	websocket = <span class="keyword">new</span> WebSocket(<span class="string">"地址"</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">	<span class="comment">// 不支持websocket</span></span><br><span class="line">&#125;</span><br><span class="line">websocket.send = (<span class="string">'msg'</span>)</span><br><span class="line"></span><br><span class="line">alert(websocket.readyState) <span class="comment">// websocket的准备状况</span></span><br><span class="line"></span><br><span class="line">websocket.onerror = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">websocket.onopen = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">websocket.onmessage = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">websocket.onclose = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
<h3 id="JS-Engine-的问题-，-V8引擎跟Fire-fox的引擎"><a href="#JS-Engine-的问题-，-V8引擎跟Fire-fox的引擎" class="headerlink" title="JS Engine 的问题 ， V8引擎跟Fire fox的引擎"></a>JS Engine 的问题 ， V8引擎跟Fire fox的引擎</h3><h4 id="常见的Js-Engine"><a href="#常见的Js-Engine" class="headerlink" title="常见的Js Engine"></a>常见的Js Engine</h4><ul>
<li>JScript（IE 6 7 8）</li>
<li>Chakra (IE9 10 11)</li>
<li>SpiderMonkey (Firefox)</li>
<li>JavascriptCore(Safari)</li>
<li>V8(Chrome)</li>
</ul>
<h4 id="V8引擎跟Fire-fox的引擎"><a href="#V8引擎跟Fire-fox的引擎" class="headerlink" title="V8引擎跟Fire fox的引擎"></a>V8引擎跟Fire fox的引擎</h4><ul>
<li><p>都是JIT 编译引擎（即时编译运行）</p>
</li>
<li><p>都有GC垃圾回收机制</p>
</li>
<li><p>V8有隐藏类引用概念</p>
</li>
</ul>
<p>性能上v8 比 spiderMonkey 更优</p>
<h3 id="小程序，小游戏的js-engine是什么引擎"><a href="#小程序，小游戏的js-engine是什么引擎" class="headerlink" title="小程序，小游戏的js engine是什么引擎?"></a>小程序，小游戏的js engine是什么引擎?</h3><p>微信小程序小游戏js engine 是three.js </p>
<p>微信小程序使用的是QQ浏览器内核x5 </p>
<p>UC浏览器 U4内核</p>
<p>U4内核2.0版本 完整支持pwa</p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        
  <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
    <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
      <span>赏</span>
    </button>
    <div id="QR" style="display: none;">
      
        <div id="wechat" style="display: inline-block">
          <img id="wechat_qr" src="https://wurh.github.io/images/others/weixinshou.png" alt="华Ing WeChat Pay"/>
          <p>微信打赏</p>
        </div>
      
      
        <div id="alipay" style="display: inline-block">
          <img id="alipay_qr" src="https://wurh.github.io/images/others/alifu.png" alt="华Ing Alipay"/>
          <p>支付宝打赏</p>
        </div>
      
    </div>
  </div>


      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端-知识-面试/" rel="tag">#前端 知识 面试</a>
          
        </div>
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/04/03/201904030639/" rel="next" title="算法面试《第一篇》 剑指offer">
                <i class="fa fa-chevron-left"></i> 算法面试《第一篇》 剑指offer
              </a>
            
          </div>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/04/06/201904060843/" rel="prev" title="前端面试《第二十篇》 大厂问题2">
                前端面试《第二十篇》 大厂问题2 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
        
<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div class="ds-thread" data-thread-key="2019/04/06/201904060504/"
           data-title="前端面试《第十九篇》 大厂的问题 (第一篇)" data-url="http://wurh.github.io/2019/04/06/201904060504/">
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            Overview
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="https://wurh.github.io/images/avatar/logo.jpg?123456"
               alt="华Ing" />
          <p class="site-author-name" itemprop="name">华Ing</p>
          <p class="site-description motion-element" itemprop="description">harder and harder</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">56</span>
              <span class="site-state-item-name">posts</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              <a href="/categories">
                <span class="site-state-item-count">11</span>
                <span class="site-state-item-name">categories</span>
              </a>
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">tags</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/wurh" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/1674582564/profile?topnav=1&wvr=6" target="_blank" title="微博">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  微博
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://www.zhihu.com/people/wu-rong-hua-56" target="_blank" title="知乎">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              Links
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://fsiaonma.github.io/" title="sam博客" target="_blank">sam博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://shenjoel.github.io/" title="joel博客" target="_blank">joel博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://firewood1122.github.io" title="firewood博客" target="_blank">firewood博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://reqianduan.com" title="热前端" target="_blank">热前端</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://opentutorial.info/" title="黄超博客" target="_blank">黄超博客</a>
                </li>
              
            </ul>
          </div>
        

      </section>

      
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">
            
              
            
            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#最近做过的项目又遇到什么难点，-怎么解决？"><span class="nav-number">1.</span> <span class="nav-text">最近做过的项目又遇到什么难点， 怎么解决？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-在使用node-js-开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存-与-释放库存，-可是到生产环境上（多进程）模式，-会出现数据不一致问题："><span class="nav-number">1.1.</span> <span class="nav-text">1.在使用node.js 开发过程中，单机研发环境时候操作数据（如加减库存）会没问题，而且也能正常的扣减库存 与 释放库存， 可是到生产环境上（多进程）模式， 会出现数据不一致问题：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-在使用node-js-开发过程中，单机研发数据放在内存里面写入读取正常，当更新到生产环境多进程-cluster-模式下出现问题，-写入的数据丢失，或者无法获取"><span class="nav-number">1.2.</span> <span class="nav-text">2.在使用node.js 开发过程中，单机研发数据放在内存里面写入读取正常，当更新到生产环境多进程(cluster)模式下出现问题， 写入的数据丢失，或者无法获取</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ReactJS-VUE-AngulrarJS，这三个流行的前端框架有何优劣，各自适用什么场景？"><span class="nav-number">2.</span> <span class="nav-text">ReactJS/VUE/AngulrarJS，这三个流行的前端框架有何优劣，各自适用什么场景？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#AngulrarJS"><span class="nav-number">2.1.</span> <span class="nav-text">AngulrarJS</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#react"><span class="nav-number">2.2.</span> <span class="nav-text">react</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vue"><span class="nav-number">2.3.</span> <span class="nav-text">vue</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对CSS3的flex布局有何了解？一段文字分三列自适应显示，如何实现？"><span class="nav-number">3.</span> <span class="nav-text">对CSS3的flex布局有何了解？一段文字分三列自适应显示，如何实现？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#web性能优化有哪些点？-vue-js如何性能优化？-ReactJS如何优化性能？"><span class="nav-number">4.</span> <span class="nav-text">web性能优化有哪些点？ vue.js如何性能优化？ ReactJS如何优化性能？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#http协议常用状态码有些？http协议缓存机制是怎样的？"><span class="nav-number">5.</span> <span class="nav-text">http协议常用状态码有些？http协议缓存机制是怎样的？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#http常用状态码"><span class="nav-number">5.1.</span> <span class="nav-text">http常用状态码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#http协议缓存机制"><span class="nav-number">5.2.</span> <span class="nav-text">http协议缓存机制</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#http2-0协议做了哪些改进"><span class="nav-number">6.</span> <span class="nav-text">http2.0协议做了哪些改进</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#前端项目构建、部署用到哪些工具？除了文件压缩、打包、hash，还有哪些可优化的点？"><span class="nav-number">7.</span> <span class="nav-text">前端项目构建、部署用到哪些工具？除了文件压缩、打包、hash，还有哪些可优化的点？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#前端项目构建、部署用到的工具"><span class="nav-number">7.1.</span> <span class="nav-text">前端项目构建、部署用到的工具</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#前端工程化优化点"><span class="nav-number">7.2.</span> <span class="nav-text">前端工程化优化点</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#从输入URL到页面加载完成的过程中都发生了什么事情？（这个问题涉及面非常广，谈的越多越好）"><span class="nav-number">8.</span> <span class="nav-text">从输入URL到页面加载完成的过程中都发生了什么事情？（这个问题涉及面非常广，谈的越多越好）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#域名解析阶段"><span class="nav-number">8.1.</span> <span class="nav-text">域名解析阶段</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#页面渲染阶段"><span class="nav-number">8.2.</span> <span class="nav-text">页面渲染阶段</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#前端性能方面"><span class="nav-number">8.3.</span> <span class="nav-text">前端性能方面</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#html-解析"><span class="nav-number">8.3.1.</span> <span class="nav-text">html 解析</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你是如何了解业界最新技术和发展趋势的"><span class="nav-number">9.</span> <span class="nav-text">你是如何了解业界最新技术和发展趋势的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#谈谈你最近了解的最新技术有哪些？"><span class="nav-number">10.</span> <span class="nav-text">谈谈你最近了解的最新技术有哪些？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#是否了解react的下一代架构Fiber？你对PWA-渐进式Web-APP-有何看法？"><span class="nav-number">11.</span> <span class="nav-text">是否了解react的下一代架构Fiber？你对PWA(渐进式Web APP)有何看法？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#我理解的Fiber架构："><span class="nav-number">11.1.</span> <span class="nav-text">我理解的Fiber架构：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#要理解Fiber架构，首先要理解react16以前，组建的渲染顺序"><span class="nav-number">11.2.</span> <span class="nav-text">要理解Fiber架构，首先要理解react16以前，组建的渲染顺序.</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#如果这是一个很大，层级很深的组件，react渲染它需要几十甚至几百毫秒，在这期间，react会一直占用浏览器主线程，任何其他的操作（包括用户的点击，鼠标移动等操作）都无法执行。"><span class="nav-number">11.3.</span> <span class="nav-text">如果这是一个很大，层级很深的组件，react渲染它需要几十甚至几百毫秒，在这期间，react会一直占用浏览器主线程，任何其他的操作（包括用户的点击，鼠标移动等操作）都无法执行。</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何在团队中推广你做的东西？（职位相关问题）"><span class="nav-number">12.</span> <span class="nav-text">如何在团队中推广你做的东西？（职位相关问题）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#你的职业规划是怎样的"><span class="nav-number">13.</span> <span class="nav-text">你的职业规划是怎样的</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是继承"><span class="nav-number">14.</span> <span class="nav-text">什么是继承</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如果设计一个JS组件，会如何设计？"><span class="nav-number">15.</span> <span class="nav-text">如果设计一个JS组件，会如何设计？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#PC、移动端的做法，有什么不同"><span class="nav-number">16.</span> <span class="nav-text">PC、移动端的做法，有什么不同</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Node-js-是否有用？-Node-js-是什么"><span class="nav-number">17.</span> <span class="nav-text">Node.js 是否有用？ Node.js 是什么</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Node-js-是什么"><span class="nav-number">17.1.</span> <span class="nav-text">Node.js 是什么</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#Node-js有超强的高并发能力"><span class="nav-number">17.1.1.</span> <span class="nav-text">Node.js有超强的高并发能力</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Node用的就是JavaScript的语法"><span class="nav-number">17.1.2.</span> <span class="nav-text">Node用的就是JavaScript的语法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Node-JS-出现促成前端工程化思想"><span class="nav-number">17.1.3.</span> <span class="nav-text">Node.JS 出现促成前端工程化思想</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Node-js适合做什么？"><span class="nav-number">17.1.4.</span> <span class="nav-text">Node.js适合做什么？</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Node-js适合做什么？-1"><span class="nav-number">17.1.5.</span> <span class="nav-text">Node.js适合做什么？</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Node-js-的事件循环"><span class="nav-number">17.2.</span> <span class="nav-text">Node.js 的事件循环</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#认识v8-引擎"><span class="nav-number">17.3.</span> <span class="nav-text">认识v8 引擎</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#项目有没做单元测试？"><span class="nav-number">18.</span> <span class="nav-text">项目有没做单元测试？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#使用mocha-进行单元测试，-通过Assert断言库进行"><span class="nav-number">18.1.</span> <span class="nav-text">使用mocha 进行单元测试， 通过Assert断言库进行</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#在项目中，你的角色是怎样的？获得了怎样的成绩"><span class="nav-number">19.</span> <span class="nav-text">在项目中，你的角色是怎样的？获得了怎样的成绩</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#websocket-协议"><span class="nav-number">20.</span> <span class="nav-text">websocket 协议</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JS-Engine-的问题-，-V8引擎跟Fire-fox的引擎"><span class="nav-number">21.</span> <span class="nav-text">JS Engine 的问题 ， V8引擎跟Fire fox的引擎</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#常见的Js-Engine"><span class="nav-number">21.1.</span> <span class="nav-text">常见的Js Engine</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#V8引擎跟Fire-fox的引擎"><span class="nav-number">21.2.</span> <span class="nav-text">V8引擎跟Fire fox的引擎</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#小程序，小游戏的js-engine是什么引擎"><span class="nav-number">22.</span> <span class="nav-text">小程序，小游戏的js engine是什么引擎?</span></a></li></ol></div>
            
          </div>
        </section>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2013 - 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">华Ing</span>
</div>

<div class="powered-by">
  Powered by <a class="theme-link" href="https://hexo.io">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Pisces
  </a>
</div>

        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.0.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.0.2"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"wurh"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
    <script src="/lib/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  






  
  

  

  

  

  


</body>
</html>
